<template>
  <div class="construction-warn-page" v-loading="pageLoading">
    <!--  -->
    <a-row>
      <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules">
        <!--【固定字段】 设备名称 -->
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="6">
          <a-form-model-item ref="proName" label="设备名称" prop="proName">
            <a-input placeholder="请输入" disabled v-model="ruleForm.equName" />
          </a-form-model-item>
        </a-col>
        <!-- 【固定字段】结构类型 -->
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="6">
          <a-form-model-item ref="ratioName" label="结构类型" prop="ratioName">
            <a-select
              v-model="ruleForm.ratioName"
              placeholder="请选择结构类型"
              @change="ratioNameChange($event)"
            >
              <a-select-option
                :value="item.ratioName"
                v-for="(item, index) in ratioSource"
                :key="index"
              >
                {{ item.ratioName }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>

        <!-- 【动态字段】 -->
        <span v-for="item in filedSource" :key="item.id">
          <!-- input -->
          <a-col
            :xs="24"
            :sm="24"
            :md="24"
            :lg="12"
            :xl="12"
            :xxl="6"
            v-if="item.fieldType == 'input'"
          >
            <a-form-model-item
              :label="item.fieldName"
              :prop="item.equFieldCode"
              :rules="[
                {
                  required: item.fieldRequired == 1,
                  message: item.placeHolder || '请输入' + item.fieldName,
                  trigger: ['blur', 'change'],
                },
              ]"
            >
              <a-input
                :disabled="item.isEditable == 1"
                allowClear
                v-model="ruleForm[item.equFieldCode]"
                :type="item.fieldContentType"
                :maxLength="Number(item.maxLength)"
                :placeholder="item.placeHolder || '请输入' + item.fieldName"
              />
            </a-form-model-item>
          </a-col>

          <!-- 单选框 -->
          <a-col
            :xs="24"
            :sm="24"
            :md="24"
            :lg="12"
            :xl="12"
            :xxl="6"
            v-if="item.fieldType == 'radio'"
          >
            <a-form-model-item
              ref="phyEquipmentNumber"
              :label="item.fieldName"
              :prop="item.equFieldCode"
              :rules="[
                {
                  required: item.fieldRequired == 1,
                  message: item.placeHolder || '请选择' + item.fieldName,
                  trigger: ['change'],
                },
              ]"
            >
              <a-radio-group v-model="ruleForm[item.equFieldCode]">
                <a-radio
                  :value="select.value"
                  v-for="(select, index) in item.selectDataList"
                  :key="index"
                >
                  {{ select.text }}
                </a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>

          <!-- select -->
          <a-col
            :xs="24"
            :sm="24"
            :md="24"
            :lg="12"
            :xl="12"
            :xxl="6"
            v-if="item.fieldType == 'select'"
          >
            <a-form-model-item
              ref="phyEquipmentNumber"
              :label="item.fieldName"
              :prop="item.equFieldCode"
              :rules="[
                {
                  required: item.fieldRequired == 1,
                  message: item.placeHolder || '请选择' + item.fieldName,
                  trigger: ['change'],
                },
              ]"
            >
              <a-select
                allowClear
                :disabled="item.isEditable == 1"
                v-model="ruleForm[item.equFieldCode]"
                :placeholder="item.placeHolder || '请选择' + item.fieldName"
              >
                <a-select-option
                  :value="select.value"
                  v-for="(select, index) in item.selectDataList"
                  :key="index"
                >
                  {{ select.text }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </span>
      </a-form-model>
    </a-row>
    <!-- 提交按钮 -->
    <div class="footer">
      <a-button
        type="primary"
        style="margin-left: 10px"
        v-loading="submitLoading"
        :disabled="!ruleForm.ratioName || filedSource.length == 0"
        @click="onSubmit()"
      >
        确定
      </a-button>
    </div>
  </div>
</template>

<script>
import {
  queryRatio,
  warncfgDetail,
  warncfgEdit,
} from "@/api/user-center/equipmentManage.js";
export default {
  data() {
    return {
      ruleForm: {
        ratioName: undefined,
      },
      rules: {
        //结构面层
        ratioName: [
          { required: true, message: "请选择结构类型", trigger: "change" },
        ],
      },
      ratioSource: [],
      ratioName: undefined,
      pageLoading: false,
      submitLoading: false,
      filedSource: [],
      warncfg: {},
    };
  },
  mounted() {
    this.queryRatio();
  },
  methods: {
    //查询结构面层
    queryRatio() {
      this.pageLoading = true;
      let { equNum, tenantCode, secCode, systemCode, equName } =
        this.$route?.query || {};
      this.ruleForm.equName = equName;
      queryRatio({
        tenantCode,
        secCode,
        systemCode,
      })
        .then((res) => {
          let { data } = res;
          this.ratioSource = data?.result || [];
          this.ruleForm.ratioName =
            this.ratioSource?.[0]?.ratioName || undefined;
          if (this.ratioSource.length == 0) {
            this.pageLoading = false;
          } else {
            this.warncfgDetail();
          }
        })
        .catch((_) => {
          this.ratioSource = [];
          this.ruleForm.ratioName = undefined;
          this.pageLoading = false;
        })
        .finally((_) => {});
    },

    //监听结构类型切换
    ratioNameChange() {
      this.warncfgDetail();
    },

    //查询预警列表
    warncfgDetail() {
      let { equNum, tenantCode, secCode, systemCode, equTypeValue } =
        this.$route?.query || {};
      let { ratioName } = this.ruleForm;
      this.pageLoading = true;
      warncfgDetail({
        equCode: equNum,
        tenantCode,
        secCode,
        systemCode,
        ratioName,
        equType: equTypeValue,
      })
        .then((res) => {
          let { data } = res;
          this.filedSource = data?.result?.configs || [];
          this.warncfg = data?.result?.warncfg || {};
          this.filedSource.forEach((v) => {
            this.$set(
              this.ruleForm,
              v.equFieldCode,
              v.defalutValue || undefined
            );
          });
        })
        .catch((_) => {
          this.filedSource = [];
          this.warncfg = {};
        })
        .finally((_) => {
          this.pageLoading = false;
        });
    },

    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          Object.keys(this.ruleForm).forEach((key) => {
            this.warncfg[key] = this.ruleForm[key];
          });
          this.submitLoading = true;
          let { systemCode, equTypeValue } = this.$route?.query || {};
          warncfgEdit({
            systemCode,
            equType: equTypeValue,
            data: this.warncfg,
          })
            .then((res) => {
              let { data } = res;
              if (data?.result) {
                this.$message.success("操作成功");
              } else {
                this.$message.error("操作失败，请稍后重试！");
              }
            })
            .catch((_) => {
              this.$message.error("操作失败，请稍后重试！");
            })
            .finally((_) => {
              this.submitLoading = false;
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.construction-warn-page {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 20px 20px 0;
  /deep/.ant-form {
    .ant-form-item {
      .flex();
      .ant-form-item-label {
        width: 150px;
        flex-shrink: 0;
      }
      .ant-form-item-control-wrapper {
        flex: 1;
        .ant-form-item-control {
          height: 100%;
          .ant-form-item-children {
            width: 100%;
            .ant-radio-group {
              margin-top: 10px;
            }
            .ant-input-affix-wrapper {
              width: 100%;
            }
          }
        }
        textarea {
          height: 80px;
        }
        .ant-calendar-picker {
          width: 100%;
        }
      }
    }
    /deep/.ant-select {
      width: 100%;
    }
    /deep/.ant-input {
      width: 100%;
    }
  }
  .footer {
    height: 72px;
    border-top: 1px solid #f3f4f6;
    margin-top: 18px;
    .flex();
    justify-content: center;
    align-items: center;
  }
}
</style>
